<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/include/includes.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script language="javascript" src="http://apis.mapabc.com/webapi/auth.json?t=javascriptmap&v=3.1.1&key=622df6421bccd10649a1769ca1874dc6959d2e435db7141aea54c3dafe754338df42247110ff38c7"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
<style type="text/css">
#layerBar div{ padding:2px 0; cursor:pointer }
#layerBar div:hover{ text-decoration:underline }
#buttons{ clear:both;text-align:center }
.bLyrHide{ color:#ddd; } /* class for hidden layerBar layers */
</style>
<script type="text/javascript">
var xFix = 0.0052;
var yFix = -0.0021;

var mapObj,polyline;

var startX = parseFloat("${startPoint.clo}");
var startY = parseFloat("${startPoint.cla}");
var endX = parseFloat("${endPoint.clo}");
var endY = parseFloat("${endPoint.cla}");
var cX = 118.889064;
var cY = 31.988084;

//计算中心点
if(startX != null && startY != null && endX != null && endY != null && !isNaN(startX) && !isNaN(startY) && !isNaN(endX) && !isNaN(endY)){
	cX = (startX + endX) / 2;
	cY = (startY + endY) / 2;
}

//初始化地图
function mapInit(){
	var opt = {
	    level:13,//初始地图视野级别
	    //center:new MMap.LngLat(116.397428,39.90923),//设置地图中心点
	    center:new MMap.LngLat(cX, cY),//设置地图中心点
	    doubleClickZoom:true,//双击放大地图
	    scrollwheel:true//鼠标滚轮缩放地图
    }
    mapObj = new MMap.Map("iCenter",opt);
    mapObj.plugin(["MMap.ToolBar","MMap.OverView","MMap.Scale"],function()
    {
	    toolbar = new MMap.ToolBar();
	    toolbar.autoPosition=false; //加载工具条
	    mapObj.addControl(toolbar);
	    overview = new MMap.OverView(); //加载鹰眼
	    mapObj.addControl(overview);
	    scale = new MMap.Scale(); //加载比例尺
	    mapObj.addControl(scale);
    });
}

//画线
function addMPolyline(){
	var arr=new Array();//经纬度坐标数组
	<c:forEach var="p" items="${gpsCarHisList}">arr.push(new MMap.LngLat((${p.clo}+xFix),(${p.cla}+yFix)));
	</c:forEach>
	polyline=new MMap.Polyline({
		id:"polyline01",
		path:arr,
		strokeColor:"#3842b7", //线颜色
		strokeOpacity:0.8, //线透明度
		strokeWeight:3, //线宽
		strokeStyle:"solid", //线样式
		strokeDasharray:[10,5] //补充线样式
	});
	mapObj.addOverlays(polyline);
}

//移除线
function removepolyline(){
	mapObj.removeOverlays("polyline01");
}

//起点
function addStartPoint(clo,cla){
	var marker = new MMap.Marker({
		id:"startPoint", //marker id
		position:new MMap.LngLat(clo,cla), //位置
		icon:"img/icon/qd.png",//图片
		offset:new MMap.Pixel(-11.5,-32), //基点为图片左上角，设置相对基点的图片位置偏移量，向左向下为负
		draggable:false, //可拖动
		cursor:"../MapControl/openhand.cur",//鼠标悬停时显示的光标样式
		visible:true,//可见
		zIndex:2//设置点叠加顺序，在加载多个点有效果，详见设置点叠加顺序示例
	});
	mapObj.addOverlays(marker);
	//mapObj.setFitView([marker]);  //转到点视野
	var inforWindow = new MMap.InfoWindow({
		content:"起点",
		offset:new MMap.Pixel(-106,-61)
    });
	mapObj.bind(marker,"click",function(e){
		inforWindow.open(mapObj,marker.getPosition());
	});
}

//终点
function addEndPoint(clo,cla){
	var endMarker = new MMap.Marker({
		id:"endPoint", //marker id
		position:new MMap.LngLat(clo,cla), //位置
		icon:"img/icon/zd.png",//图片
		offset:new MMap.Pixel(-11.5,-32), //基点为图片左上角，设置相对基点的图片位置偏移量，向左向下为负
		draggable:false, //可拖动
		cursor:"../MapControl/openhand.cur",//鼠标悬停时显示的光标样式
		visible:true,//可见
		zIndex:2//设置点叠加顺序，在加载多个点有效果，详见设置点叠加顺序示例
	});
	mapObj.addOverlays(endMarker);
	//mapObj.setFitView([marker]);  //转到点视野
	var inforWindow = new MMap.InfoWindow({
		content:"终点",
		offset:new MMap.Pixel(-106,-61)
    });
	mapObj.bind(endMarker,"click",function(e){
		inforWindow.open(mapObj,endMarker.getPosition());
	});
}

//移动
function moveAlong(){
	mapObj.setZoom(16);
	//mapObj.clearMap();
	var speed=18;
	var f ="";
	if (f ==""){f=null;}
	var lineArr = new Array(); //线经纬度数组
	<c:forEach var="p" items="${gpsCarHisList}">lineArr.push(new MMap.LngLat((${p.clo}+xFix),(${p.cla}+yFix)));
	</c:forEach>
	mapObj.addOverlays(polyline); 
	marker = new MMap.Marker({ 
		id:"car",//id 
		zIndex: 9,
		position:new MMap.LngLat("${startPoint.clo}","${startPoint.cla}"),//位置
		icon:"img/icon/car.png",//图标 
		offset:{x:-26,y:-13}//相对于基点的偏移量 
	}); 
	mapObj.addOverlays(marker); 
	marker.moveAlong(lineArr,speed,f);//按线路移动点 
	var inforWindow = new MMap.InfoWindow({//点的信息窗体 
		content:"this is gps car"//内容 
	}); 
	mapObj.bind(marker,"click",function(e){ 
		inforWindow.open(mapObj,marker.getPosition());
	});
	mapObj.bind(marker,"moving",function(e){
		inforWindow.setPosition(marker.getPosition());
	});
	mapObj.panTo(marker.getPosition());
	mapObj.bind(marker,"moving",function(e){
		var lnglat = marker.getPosition();
		var bounds = mapObj.getBounds();
		if(lnglat.lng <= bounds.southwest.lng || lnglat.lng>=bounds.northeast.lng || lnglat.lat<=bounds.southwest.lat || lnglat.lat>=bounds.northeast.lat){ 
			mapObj.panTo(lnglat);
		}
	});
}

var Trafficlay;
//交通图层
function addTileLayer_TRAFFIC(){
	//mapObj.clearOverlays();
	Trafficlay = new MMap.TileLayer({
		tileSize:256,//图像大小
		id:"t",
		zIndex:2,
		getTileUrl:function(x,y,z){
			return "http://tm.mapabc.com/trafficengine/mapabc/traffictile?v=1.0&t=1&zoom="+(17-z)+"&x="+x+"&y="+y;
		}
	});
	mapObj.addLayer(Trafficlay);
}

//删除交通图层
function removeTileLayer_TRAFFIC(){
	mapObj.removeLayer("t");
}

//绘制停车点
function drawStopPoints(){
	<c:forEach var="p" items="${gpsCarHisList}"> <c:if test="${p.conline > 360}">addStopPoint("s_${p.id}",(${p.clo}+xFix),(${p.cla}+yFix),"<fmt:formatDate value="${p.ctime}" pattern="yyyy-MM-dd hh:mm:ss"/><br/>停留:"+UTILS_second2time(${p.conline}));
	</c:if></c:forEach>
}

function addStopPoint(id,clo,cla,content){
	var stopMarker = new MMap.Marker({
		id:id, //marker id
		position:new MMap.LngLat(clo,cla), //位置
		icon:"img/icon/stop.png",//图片
		offset:new MMap.Pixel(-11.5,-32), //基点为图片左上角，设置相对基点的图片位置偏移量，向左向下为负
		draggable:false, //可拖动
		cursor:"../MapControl/openhand.cur",//鼠标悬停时显示的光标样式
		visible:true,//可见
		zIndex:1//设置点叠加顺序，在加载多个点有效果，详见设置点叠加顺序示例
	});
	mapObj.addOverlays(stopMarker);
	//mapObj.setFitView([marker]);  //转到点视野
	var inforWindow = new MMap.InfoWindow({
		content:content,
		offset:new MMap.Pixel(-106,-61)
    });
	mapObj.bind(stopMarker,"click",function(e){
		inforWindow.open(mapObj,stopMarker.getPosition());
	});
}

$(document).ready(function(){
	mapInit();
	addMPolyline();
	addStartPoint((${startPoint.clo}+xFix),(${startPoint.cla}+yFix));
	addEndPoint((${endPoint.clo}+xFix),(${endPoint.cla}+yFix));
	$("#length").html("总长度:"+ Math.round(polyline.getLength()/1000*100)/100 +"公里");
	drawStopPoints();
});
</script>
</head>
<body>
	<table style="height:100%;width:100%">
		<tr>
			<td style="height:30px;background:#EEF">
				<form action="carhis.do">
				<table>
					<tr>
						<td style="height:40px">carid</td>
						<td>
							<select id="carid" name="carid" style="width:260px">
								<c:forEach var="device" items="${deviceList}">
									<option value="${device.carid }" title="${device.remark }" <c:if test="${carid == device.carid }" >selected</c:if> >${device.remark }&nbsp;${device.username }(${device.carid })</option>
								</c:forEach>
							</select>
						</td>
						<td>beginDate</td>
						<td><input class="textblock_date" name="beginDate" id="beginDate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd',lang:'zh-cn'})" readonly="readonly" value="${beginDate }" /></td>
						<td>endDate</td>
						<td><input class="textblock_date" name="endDate" id="endDate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd',lang:'zh-cn'})" readonly="readonly" value="${endDate }" /></td>
						<td><input type="submit" value="查询" /></td>
						<td><span id="length"></span><input onClick="moveAlong()" type="button" value="move" /></td>
						<td><input onClick="addTileLayer_TRAFFIC()" type="button" value="treffic" /></td>
						<td><input onClick="removeTileLayer_TRAFFIC()" type="button" value="clearTreffic" /></td>
					</tr>
				</table>
				</form>
			</td>
		</tr>
		<tr>
			<td>
				<div id="iCenter" style="width:100%; height:100%"></div>
			</td>
		</tr>
	</table>
</body>
</html>
